<template>
  <div>
    <div class="clt-header">
      <div>
        <img class="clt-logo" src="../../../assets/logo/clt-logo-zx.png" />
        <span class="header_title"></span>
      </div>
      <div class="cm-line"></div>
    </div>
    <div class="clt-main">
      <div
        class="cm-content"
        :class="index == 1 || index == 3 ? 'cm-content1' : ''"
        v-for="(item, index) in cltList"
        :key="index"
      >
        <div class="cm-title">{{ item.firstTitle }}</div>
        <div class="clt-my_wrap" :class="index == 0 || index == 1 ? 'clt-my_wrap1' : ''">
          <div class="clt-module_header">
            <p class="clt-title">{{ item.title }}</p>
          </div>
          <div class="clt-module_content">
            <div class="content_item_wrap">
              <div class="num_wrap">
                <div class="content_num">{{ item.value }}</div>
                <div class="content_unit">{{ item.unit }}</div>
              </div>
            </div>
          </div>

          <div class="clt-module_content">
            <div class="ci_new">
              <p>
                <span class="cn-title">{{ item.leftTitle }}</span>
              </p>
              <p>
                <span class="cn-value" v-if="index === 2">{{ parseFloat(item.leftValue).toFixed(2) }}</span>
                <span class="cn-value" v-else>{{ item.leftValue }}</span>

                <span class="cn-unit">{{ item.leftUnit }}</span>
              </p>
            </div>
            <div class="ci_new">
              <p>
                <span class="cn-title">{{ item.rightTitle }}</span
                ><br />
              </p>
              <p>
                <span class="cn-value" v-if="index === 2 && parseFloat(item.rightValue) > 0">{{
                  parseFloat(item.rightValue).toFixed(2)
                }}</span>
                <span class="cn-value" v-else>
                  {{ item.rightValue }}
                </span>
                <span class="cn-unit">{{ item.rightUnit }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/utils/request'

export default {
  data() {
    return {
      lj: 26093.48,
      ljkh: 7089,
      ljjybs: 35639,
      cltList: [
        {
          title: '累计商户交易量',
          value: null,
          unit: '万元',
          firstTitle: '商户交易量',

          leftTitle: '当年新增',
          leftValue: '',
          leftUnit: '万元',

          rightTitle: '昨日新增',
          rightValue: '',
          rightUnit: '万元',
        },
        {
          title: '累计注册商户数',
          value: null,
          unit: '户',
          firstTitle: '注册商户数',

          leftTitle: '当年新增',
          leftValue: '',
          leftUnit: '户',

          rightTitle: '昨日新增',
          rightValue: '',
          rightUnit: '户',
        },

        {
          title: '累计商户融资金额',
          value: null,
          unit: '万元',
          firstTitle: '商户融资金额',

          leftTitle: '当年新增',
          leftValue: '',
          leftUnit: '万元',

          rightTitle: '昨日新增',
          rightValue: '',
          rightUnit: '万元',
        },

        {
          title: '累计融资商户数',
          value: null,
          unit: '户',
          firstTitle: '融资商户数',

          leftTitle: '当年新增',
          leftValue: '',
          leftUnit: '户',

          rightTitle: '昨日新增',
          rightValue: '',
          rightUnit: '户',
        },
      ],
    }
  },
  props: ['qgData', 'shopNum', 'baseData'],
  mounted() {
    this.ljkh = this.shopNum
    this.initTimerLjjy()
    this.queryLjkhOther()
    this.cltList[1]['leftValue'] = this.baseData['addRegisterShopNum']
    this.cltList[1]['rightValue'] = this.baseData['addRegisterShopNumYesterday']

    this.saveLeftData()
    this.queryLeftData()
  },
  methods: {
    async queryLeftData() {
      let _ = this
      try {
        const res = await http.get('/shop/getTradeAmountIncrementYesterday', {
          isLoading: false,
          baseURL: 'http://111.1.139.66:8081',
        })
        let tradeAmount = res.tradeAmount && res.tradeAmount.toFixed(2) //去除多余小数
        _.cltList[0]['leftValue'] = _.accAdd(_.cltList[0]['value'], -1644939.78)

        _.cltList[0]['rightValue'] = tradeAmount
        _.cltList[2]['leftValue'] = _.accAdd(_.cltList[2]['value'], -248323.45)
        _.cltList[2]['rightValue'] = res.creditAmount
        _.cltList[3]['leftValue'] = _.accAdd(_.cltList[3]['value'], -8134)

        _.cltList[3]['rightValue'] = res.merchantCount
      } catch (e) {
        console.log(e)
      }
    },
    formatDate(date) {
      let d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear()

      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day

      return [year, month, day].join('-')
    },
    async saveLeftData() {
      let a = this.formatDate(new Date())
      let b = this.cltList[0].value
      let c = this.cltList[2].value
      let d = this.cltList[3].value
      const res = await http.get(
        '/shop/saveTradeAmount?date=' + a + '&amount=' + b + '&creditAmount=' + c + '&merchantCount=' + d,
        { isLoading: false, baseURL: 'http://111.1.139.66:8081' }
      )
      console.log(res)
    },
    initTimerLjjy() {
      let tempMoney = this.accAdd(this.qgData['04'][1].value, this.qgData['101'][0].value)
      let tempM = this.accAdd(tempMoney, 20000.0)
      this.cltList[0].value = parseFloat(tempM).toFixed(2)
    },
    queryLjkhOther() {
      this.cltList[1].value = this.ljkh
      let temp = this.accAdd(this.qgData['04'][1].value, 20000.0)
      this.cltList[2].value = parseFloat(temp).toFixed(2)
      this.cltList[3].value = this.cltList[1].value - (this.qgData['01'][0].value - this.qgData['03'][1].value)
    },

    accAdd(num1, num2) {
      let r1, r2, m, c
      try {
        r1 = num1.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = num2.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      c = Math.abs(r1 - r2)
      m = Math.pow(10, Math.max(r1, r2))
      if (c > 0) {
        let cm = Math.pow(10, c)
        if (r1 > r2) {
          num1 = Number(num1.toString().replace('.', ''))
          num2 = Number(num2.toString().replace('.', '')) * cm
        } else {
          num1 = Number(num1.toString().replace('.', '')) * cm
          num2 = Number(num2.toString().replace('.', ''))
        }
      } else {
        num1 = Number(num1.toString().replace('.', ''))
        num2 = Number(num2.toString().replace('.', ''))
      }
      return (num1 + num2) / m
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../right/newOneRight/rightBase.css';
.clt-header {
  width: 100%;
  height: 280px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .cm-line {
    width: 100%;
    height: 20px;
    /*background: url('../../../assets/images/header_line.png') no-repeat;*/
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .clt-logo {
    height: 132px;
    top: -3px;
    position: relative;
    left: -6px;
  }
  .header_title {
    font-size: 120px;
    line-height: 120px;
    font-family: 'FZDHTJW--GB1-0, FZDHTJW--GB1';
    background: linear-gradient(to bottom, rgb(124, 158, 183) 0%, rgb(168, 209, 233) 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding-bottom: 28px;
  }
}

.clt-main {
  position: absolute;
  top: 280px;
  right: 0px;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  z-index: 999;
  .cm-content {
    width: 704px;
    float: left;
    margin: 0 30px 30px 118px;
    .cm-title {
      /*padding-left: 118px;*/
      width: 100%;
      margin-top: 18px;
      height: 84px;
      float: left;
      color: #fff;
      font-size: 60px;
      margin-bottom: 30px;
    }
    .clt-my_wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      background: url('../../../assets/images/module_bgc.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      height: 646px;
      float: left;

      .clt-module_content {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /*flex: 1;*/
        .content_item_wrap {
          position: relative;
          top: -60px;
        }
        .content_num {
          font-size: 100px;
        }
        .content_unit {
          font-size: 50px;
        }
        .ci_new {
          width: 100%;
          float: left;
          font-size: 40px;
          line-height: 28px;
          color: #fff;
          text-align: center;
          p {
            margin: 30px 0;
            .cn-title {
              font-size: 28px;
              line-height: 28px;
              color: #fff;
              margin-bottom: 32px;
            }
            .cn-value {
              font-size: 48px;
              line-height: 90px;
              color: #72abc1;
            }
            .cn-unit {
              font-size: 36px;
              line-height: 36px;
              color: #72abc1;
            }
          }
        }
      }
    }
    .clt-my_wrap1 {
      margin-bottom: 31px;
      margin-top: 3px;
    }
  }

  .cm-content1 {
    margin: 0 64px 30px 0;
  }
  .clt-module_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .clt-title {
    font-size: 52px;
    line-height: 52px;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 150px 0 76px 0;
  }
}
</style>
